<template>
  <div>
    <div v-if="!$store.state.token">
      <router-view ></router-view>
    </div>

    <el-container v-if="$store.state.token">
      <el-header  class="base-header" style="height: 50px">
        <div style="font-size: 20px;color: #fff">summer-qiankun-admin微前端demo</div>
      </el-header>
      <el-container>
        <el-aside width="200px" class="base-aside">
          <el-menu
                  default-active="1"
                  background-color="#545c64"
                  text-color="#fff"
                  active-text-color="#ffd04b"
                  class="el-menu-vertical-demo"
                  @select="selectMenu"
                  @open="handleOpen"
                  @close="handleClose">

            <template v-for="(item) in menuList">
              <el-submenu :key="item.id" :index="item.name">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{item.name}}</span>
                </template>

                <template v-for="(item2,index2) in item.children">
                  <el-submenu v-if="item2.children!=null"  :index="item2.name" :key="item2.id">
                    <template slot="title">{{item2.name}}</template>
                    <template  v-for="(item3,index3) in item2.children">
                      <el-menu-item :index = "item3.path" :key = "item3.id" :id="item3.id" :name="item3.name" :appCode="item3.appCode" :frame="item3.frame">{{item3.name}}</el-menu-item>
                    </template>
                  </el-submenu>
                  <el-menu-item v-else :index = "item2.path" :key = "item2.id" :id="item2.id" :name="item2.name" :appCode="item2.appCode" :frame="item2.frame" >{{item2.name}}</el-menu-item>
                </template>
              </el-submenu>
            </template>
          </el-menu>

        </el-aside>

        <el-main class="base-main" :style="$store.state.conHeight" >
          <div  class="base-tabs" >

            <el-tabs
                    v-model="$store.state.activeMenu.path"
                    type="border-card"
                    closable
                    @tab-click='tabClick'
                    @tab-remove='tabRemove'>

              <el-tab-pane
                      v-for="(item, index) in $store.state.openTab"
                      :key="item.name" :closable="true"  :ref="'tab_'+item.id"
                      :label="item.name" :id="item.id" :path="item.path"  :appCode="item.appCode"  :compo="item.compo" :frame="item.frame"
                      :name="item.path">
              </el-tab-pane>
            </el-tabs>
          </div>
          <el-button @click="refreshPage()">刷新页面</el-button>

          <div class="content-wrap"  ref="wrap"  >
            <keep-alive :include="$store.state.viewIncludes"  >
              <router-view ></router-view>
            </keep-alive>
          </div>
          <!--qiankun dom-->
          <div :id="item.domID" v-show="$store.state.activeMenu.frame"  v-for="item in $store.state.microConfigList"></div>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    components: {

    },
    data() {
      return {
        menuList:[
          {
            id:101,
            icon:'el-icon-location',
            name:'base',
            index:'1',
            children:[
              {
                id:1001, //菜单ID
                name:'home', //菜单名称
                path:'/home', //菜单路径
                sysCode:'', //系统编码 约定=activeRule
                frame:'',//展示框架 ''基座 'micro' 微前端  'iframe' iframe标签暂未实现
              },
              {
                id:1002,
                name:'about',
                path:'/about',
                sysCode:'',
                frame:'',
              },
            ]
          },
          {
            id:201,
            icon:'el-icon-location',
            name:'app1',
            index:'2',
            children:[
              {
                id:2001,
                name:'app1Home',
                path:'/app1/home',
                appCode:'/app1',
                frame:'micro',
              },
              {
                id:2002,
                name:'app1About',
                path:'/app1/about',
                appCode:'/app1',
                frame:'micro',
              },
            ]
          },
          {
            id:301,
            icon:'el-icon-location',
            name:'app2',
            index:'2',
            children:[
              {
                id:3001,
                name:'app2Home',
                path:'/app2/home',
                appCode:'/app2',
                frame:'micro',
              },
              {
                id:3002,
                name:'app2About',
                path:'/app2/about',
                appCode:'/app2',
                frame:'micro',
              },
            ]
          },
        ],
      }
    },
    mounted() {
      let _this=this;
      if(!this.$store.state.token){//token为空跳转到login
        _this.$router.push({path: '/login'});
      }
      // 注册一个观察者函数
      _this.$actions.onGlobalStateChange((state, prevState) => {
        console.log("主应用观察者：state 改变前", prevState);
        console.log("主应用观察者：state 改变后", state);
      });
    },
    methods: {
      refreshPage () {
        let _this=this;
        let activeMenu=this.$store.state.activeMenu;

        if (activeMenu.frame==='micro'){
          console.log("触发微应用刷新")
          _this.$actions.setGlobalState({activeMenu: activeMenu,reload:true});
        }else{
          console.log("触发基座刷新")
          _this.$store.commit('deleteViewIncludes', activeMenu.compo);
          _this.$router.push({path: '/blank'});//跳到空白
          this.$nextTick(() => {
            _this.$router.push({path: activeMenu.path});
            _this.$store.commit('addViewIncludes', activeMenu.compo);

          })
        }
      },
      selectMenu(index,indexPath,menu){
        let _this=this;
        let frame=menu.$attrs.frame;
        let appCode=menu.$attrs.appCode;
        let name=menu.$attrs.name;
        let path=index;
        let id=menu.$attrs.id;

        let compo='';//根据path在 router里查找 compo;
        let route=this.$routes.find(item => item.path===path);
        if (route){
          compo=JSON.parse(JSON.stringify(route.meta.compo));
          console.log("get compo",compo);
          _this.$store.commit('addViewIncludes', compo);
        }
        //路由跳转
        if (id!==_this.$store.state.activeMenu.id){
          _this.$router.push({path: path});
        }
        //设置tab
        let tab = _this.$store.state.openTab.find(item => item.id===id);
        if(!tab){
           let menuData={id:id,name:name,path:path,appCode:appCode,compo:compo,frame:frame};
          _this.$store.commit('addTabs', menuData);
          //_this.$store.commit('addViewIncludes', compo);
          _this.$store.commit('setActiveMenu', JSON.parse(JSON.stringify(menuData)));
          _this.$actions.setGlobalState({activeMenu: JSON.parse(JSON.stringify(menuData)),reload:false});
        }else{
          _this.$store.commit('setActiveMenu', JSON.parse(JSON.stringify(tab)));
        }
        console.log("menu check",path)
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      //tab标签点击时，切换相应的路由
      tabClick(tab){
        let _this=this;
        let id=tab.$attrs.id;
        let appCode=tab.$attrs.appCode;
        let path=tab.$attrs.path;
        let frame=tab.$attrs.frame;
        let compo=tab.$attrs.compo;
        let name=tab.name;
        let menuData={id:id,name:name,path:path,appCode:appCode,compo:compo,frame:frame};
        _this.$store.commit('setActiveMenu', JSON.parse(JSON.stringify(menuData)));
        _this.$actions.setGlobalState({activeMenu: JSON.parse(JSON.stringify(menuData)),reload:false});
        this.$router.push({path: path});
        console.log('tab check',menuData);
      },
      //移除tab标签
      tabRemove(path){
        let _this=this;
        _this.$store.commit('deleteTabs',path);
        if (_this.$store.state.activeMenu.path === path) {
          // 设置当前激活的路由
          if (_this.$store.state.openTab && _this.$store.state.openTab.length >= 1) {
            let menuData=_this.$store.state.openTab[_this.$store.state.openTab.length-1];
            _this.$store.commit('setActiveMenu', JSON.parse(JSON.stringify(menuData)));
            _this.$actions.setGlobalState({activeMenu: JSON.parse(JSON.stringify(menuData)),reload:false});
            _this.$router.push({path: _this.$store.state.activePath});
          } else {
            _this.$router.push({path: '/home'});
          }
        }
      },
    },
    watch:{

    }
  }
</script>

<style>
  .base-header, .base-footer {
    background: rgb(83, 168, 255);
    color: #333;
    text-align: left;
    line-height: 30px;
    height: 30px;
  }

  .base-aside {
    color: #333;
    overflow:hidden !important;
    text-align: left;
    line-height: 600px;
    border-right:solid 1px #e6e6e6;
    background-color:#545c64;
  }

  .base-aside .el-menu{
    border-right: #e6e6e6 !important;
  }

  .base-tabs .el-tabs--border-card>.el-tabs__content {
    padding: 0px  !important;
  }
  .base-tabs .el-tabs--border-card{
    border:none;
    box-shadow:none;
  }
  .base-main {
    background-color: #fff;
    color: #333;
    text-align: left;
    height: 600px;
    padding: 0px !important;
  }
  .base-header .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .base-header.el-icon-arrow-down {
    font-size: 12px;
  }
  body{
    margin: 0px;
  }
</style>

